<template lang="pug">
  div.touch-bar
    ul.touch-bar__ul(
      @touchmove="onUlTouchmove")
      li.touch-bar__li(
        v-for="item in list",
        :key="item",
        @touchstart.prevent="onLiTouchStart(item)")
        | {{ item }}
</template>

<script lang="ts">
import { Vue, Component, Emit, Prop } from 'vue-property-decorator';

@Component
export default class TouchBar extends Vue {
  @Prop() public list!: string[];

  private onUlTouchmove(e: Event) {
  }

  @Emit('picked')
  private onLiTouchStart(item: string) {}
}
</script>

<style lang="stylus" scoped>
.touch-bar
  position fixed
  top 50px
  right 10px
  z-index 999
  padding 5px
  color #fff
  font-size 12px
  background rgba(0,0,0,0.3)
  border-radius 5px
  pointer-events auto

  &__ul
    margin 0
    padding 0
    list-style none
  &__li
    margin 0 -15px
    padding 2px 15px
    text-align center
</style>
